<script setup lang="ts">
import { ref } from 'vue';
import type { Customer } from "@/utils/types";
import axios from 'axios';
import { useRouter } from 'vue-router';
// 定义类型
// interface Customer {
//     name: string;
//     phone: string;
//     email: string;
//     education: string;
//     graduationschool: string;
//     profession: string;
//     profile: string;
// }


const router = useRouter()

const customer = ref<Customer>({
    name: "",
    phone: "",
    email: "",
    education: "",
    graduationschool: "",
    profession: "",
    profile: ""
})

const addCustomer = async () => {
    // console.log(customer.value);
    let newCustomer = {
        name: customer.value.name,
        phone: customer.value.phone,
        email: customer.value.email,
        education: customer.value.education,
        graduationschool: customer.value.graduationschool,
        profession: customer.value.profession,
        profile: customer.value.profile

    }
    await axios.post("http://localhost:3000/users", newCustomer)
    // 页面跳转，并添加参数
    router.push({path:"/",query:{alert:'用户信息添加成功'}})

}

</script>

<template>
    <div class="add container">
        <form @submit.prevent="addCustomer">
            <div class="mb-3">
                <label class="form-label">姓名</label>
                <input type="text" class="form-control" placeholder="名字" v-model="customer.name">
            </div>
            <div class="mb-3">
                <label class="form-label">电话</label>
                <input type="text" class="form-control" placeholder="" v-model="customer.phone">
            </div>
            <div class="mb-3">
                <label class="form-label">邮箱</label>
                <input type="email" class="form-control" placeholder="" v-model="customer.email">
            </div>
            <div class="mb-3">
                <label class="form-label">学历</label>
                <input type="text" class="form-control" placeholder="名字" v-model="customer.education">
            </div>
            <div class="mb-3">
                <label class="form-label">毕业学校</label>
                <input type="text" class="form-control" placeholder="北京大学" v-model="customer.graduationschool">
            </div>
            <div class="mb-3">
                <label class="form-label">专业</label>
                <input type="text" class="form-control" placeholder="计算机科学与技术" v-model="customer.profession">
            </div>
            <div class="mb-3">
                <label class="form-label">个人简介</label>
                <textarea class="form-control" rows="7" v-model="customer.profile"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</template>
  
<style>

</style>
  